// 封装选择器函数
// 方式一 初级
function add(serve) {
    document.querySelector("serve")
}
function add(serve) {
    document.querySelectorAll("serve")
}
// 方式二 
// 中级
function getEle(serve, isAll = false) {
    if (isAll) {
        return document.querySelectorAll("serve")
    } else {
        return document.querySelector("serve")
    }
}
// console.log(getEle(`serve`,true));
// 方式三

/**
 * @name 获取节点
 * @description 根据选择器返回对应的节点
 * @param {string} selector
 * @returns 节点
 * **/ 
function $(serve) {
    const result = document.querySelectorAll(serve)
    if (!result || result.length === 0) {
        return console.warn(`未获取节点${serve}`)
    }
    if (result.length === 1) {
        return result[0];
    }
    return result;
}
// console.log($('#serve .container'));

// 选项卡函函数封装
function tabChange(option) {
	const tabIndex = option.tabIndex || 0;
	const contIndex = option.contIndex || 0;
	// 默认第一个Tab激活
	$(option.tabSelector)[tabIndex].classList.add(option.tabClassName);
	// 默认让第一个内容区显示
	option.contSelector &&
		$(option.contSelector)[contIndex].classList.add(option.contClassName);
	// 1.获取相关节点
	// $("#detailContList li");
	// 2.给节点绑定点击事件
	$(option.tabSelector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他，将所有Tab的激活取消
			// console.log(v);
			$(option.tabSelector).forEach(function (each) {
				console.log("每一项", each);
				each.classList.remove(option.tabClassName);
			});
			// 4.给当前节点增加激活样式
			this.classList.add(option.tabClassName);
			// 5.让对应索引的内容显示
			if (option.contSelector) {
				// 5-1.先排他
				$(option.contSelector).forEach(function (item) {
					item.classList.remove(option.contClassName);
				});
				// 5-2.显示对应内容
				$(option.contSelector)[i].classList.add(option.contClassName);
			}
		});
	});
	// 6.调用测试--事件委派不适用
	// 7.优化代码--传参太多，而且位置不能变
}